<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            width: 100%;

            text-align: center;
            border: 1px solid #ccc;
        }

        td, th {
            border: 1px solid #ccc;
            text-align: center;
            padding: 10px 0;
        }

        .add, .sub {
            width: 40px;
        }

        .addBox {
            display: flex;
            align-items: center;
        }

        tr {
            cursor: pointer;
        }

        .active {
            background-color: dodgerblue;
            color: #ffffff;
        }
        h1{
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <template v-if="books.length">
        <div class="addBox">
            <input type="text" v-model="bookName" placeholder="添加书籍">
            <input type="text" v-model="bookDate" placeholder="出版日期">
            <input type="text" v-model.number="bookPrice" placeholder="书籍价格">
            <input type="text" v-model.number="bookCount" placeholder="书籍数量">
            <button class="addBook" @click="addBook">添加书籍</button>
        </div>
        <table>
            <thead>
            <tr>
                <th>id</th>
                <th>状态</th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in books" :key="item.id" @mouseenter="addTrBack(index)" @mouseleave="removeTrback" :class="{active:index===currentIndex}">
                <td>{{item.id}}</td>
                <td><input type="checkbox" :checked="item.done" @change="changeDone(item.id,$event.target.checked)"></td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>￥{{item.price}}</td>
                <td>
                    <button @click="sub(item.id)" :disabled="item.count<=1" class="sub">-</button>
                    {{item.count}}
                    <button @click="add(item.id)" class="add">+</button>
                </td>
                <td>
                    <button @click="deleteBook(item.id)">移除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div>
            <span>总价:￥{{totalPrice}}</span>
            <input type="checkbox" @change="isAll" :checked="isAllChecked">全选
        </div>
    </template>
    <h1 v-else>购物车已经被清空</h1>
</div>
<script src="../../js/vue.js"></script>
<script src="./booksData.js"></script>

<script>
    const app = Vue.createApp({
        data() {
            return {
                books: books,
                bookName: '',
                bookDate: '',
                bookPrice: '',
                bookCount: '',
                currentIndex: -1,
            }
        },
        methods: {
            //删除书籍的回调
            deleteBook(id) {
                this.books = this.books.filter((item) => {
                    return item.id !== id
                })
            },
            //添加书籍数量的回调
            add(id) {
                this.books.forEach((item) => {
                    if (item.id === id) {
                        item.count++
                    }
                })
            },
            //减少书籍数量的回调
            sub(id) {
                this.books.forEach((item) => {
                    if (item.id === id) {
                        item.count--
                    }
                })
            },
            //添加书籍的回调
            addBook() {
                if (this.bookName === "") return
                const newBook = {
                    id: Math.floor(Math.random() * 100),
                    name: this.bookName,
                    date: this.bookDate,
                    count: this.bookCount,
                    price: this.bookPrice, done: false
                }
                this.books.push(newBook)
                this.bookName = ""
            },
            //鼠标经过tr的回调
            addTrBack(index) {
                this.currentIndex = index
            },
            //鼠标离开tr的回调
            removeTrback() {
                this.currentIndex = -1
            },
            //全选按钮的回调
            isAll(event) {
                this.books.forEach((item) => {
                    item.done = event.target.checked
                })
            },
            //单选按钮的回调
            changeDone(id, done) {
                this.books.forEach((item) => {
                    if (item.id === id) {
                        item.done = done
                    }
                })
            }
        },
        computed: {
            //总价格
            totalPrice() {
                return this.books.reduce((preValue, item) => {
                    return preValue += item.count * item.price
                }, 0)
            },
            //是否全部选中
            isAllChecked() {
                return this.books.every((item) => {
                    return item.done === true
                })
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>
